<template>
	<view class="promotion-interest" @click="onClick">
		<vite class="title">经纪人推广权益</vite>
		<view v-if="commissionAmt && otherEquity">
			<view class="item">可选权益一：佣金¥{{commissionAmt}}</view>
			<view v-if="otherEquity" class="item">可选权益二：{{otherEquity}}</view>
		</view>
		<view v-else-if="commissionAmt">
			<view class="item">佣金¥{{commissionAmt}}</view>
		</view>
		<view v-else>
			<view class="item">{{otherEquity}}</view>
		</view>
	</view>
</template>

<script setup name="PromotionInterest">
	const props = defineProps({
		commissionAmt: {
			type: Number
		},
		otherEquity: {
			type: String
		}
	})
	
	const emits = defineEmits(['click'])
	
	const onClick = () => {
		if (props.commissionAmt && props.otherEquity) {
			emits('click')
		}
	}
</script>

<style lang="scss" scoped>
	.promotion-interest {
		display: flex;
		padding: 8px 12px;
		flex-direction: column;
		align-items: flex-start;
		border-radius: 12px;
		background: #FFF;
		
		color: #333;
		font-family: PingFang SC;
		font-size: 12px;
		font-style: normal;
		font-weight: 400;
		line-height: 22px;
		
		.title {
			color: #333;
			font-family: PingFang SC;
			font-size: 14px;
			font-style: normal;
			font-weight: 600;
			line-height: 22px;
			margin-bottom: 8px;
		}
	}
</style>